<template>
  <div class="index-container">
    <Header>
      <van-notice-bar :scrollable="false" wrapable class="font-20">
        为了避免造成大量浪费或餐食供应不足，12月16-19日期间，请您在用餐前一天的21:00通过“赛务通”进行午餐申报。
      </van-notice-bar>
    </Header>
    <div class="warpper">
      <van-cell v-for="(item,index) in foodList" :key="index">
        <template #title>
          <div class="flex-align-center">
            <p style="margin-right: 30px">
              {{ item.order_date | formatterDate }}
            </p>

            <van-checkbox shape :disabled="item.disabled" v-model="item.lunch">午餐</van-checkbox>
            <!--            <van-checkbox shape v-model="item.dinner" v-show="dinner">晚餐</van-checkbox>-->
          </div>
        </template>
      </van-cell>
      <div class="mar-16">
        <van-button block round type="info" @click="saveOrderFood" v-if="showBtn">提交</van-button>
        <van-button block round color="#999999" disabled v-else>提交</van-button>
      </div>

    </div>
  </div>
</template>

<script>
import { getDoctorOrderFoodList, saveDoctorOrderFoodList } from '@/api/orderFood'
import { getSelfInfo } from '@/utils/tokenUtil'
import { parseTime } from '@/utils/'

export default {
  data() {
    return {
      foodList: [
        {
          order_date: '2021-12-17',
          lunch: false,
          dinner: false,
          disabled: false
        },
        {
          order_date: '2021-12-18',
          lunch: false,
          dinner: false,
          disabled: false
        },
        {
          order_date: '2021-12-19',
          lunch: false,
          dinner: false,
          disabled: false
        },
        {
          order_date: '2021-12-20',
          lunch: false,
          dinner: false,
          disabled: false
        }
      ],
      showBtn: true,
      selfUserInfo: {}
    }
  },
  filters: {
    formatterDate(date) {
      let arr = date.split('-')
      return `${arr[2]} 日`
    }
  },
  mounted() {
    this.selfUserInfo = getSelfInfo()
    this.disabledTime()
    this.getOrderFood()
  },
  methods: {
    disabledTime() {
      let date = new Date()
      let getNow = parseTime(date, '{y}-{m}-{d}')
      date.setTime(date.getTime() + 24 * 60 * 60 * 1000)
      let getYesterday = parseTime(date, '{y}-{m}-{d}')
      let hour = parseTime(date, '{h}')
      let foodList = this.foodList
      for (let i = 0; i < foodList.length; i++) {
        // 小于当天时间的不能再选择
        if ((new Date(foodList[i].order_date).getTime() - new Date(getNow).getTime()) <= 0) {
          foodList[i].disabled = true
        }
        // 晚上到了21点后，不能选择第二天的
        if (parseInt(hour) >= 21 && foodList[i].order_date == getYesterday) {
          foodList[i].disabled = true
        }
      }
    },
    getOrderFood() {
      getDoctorOrderFoodList({ user_id: this.selfUserInfo.id }).then((res) => {
        if (res.data != '[]') {
          let data = JSON.parse(res.data)
          data.map(item => {
            item.dinner = item.dinner == '1' ? true : false
            item.lunch = item.lunch == '1' ? true : false
            let foodList = this.foodList
            for (let i = 0; i < foodList.length; i++) {
              if (foodList[i].order_date === item.order_date) {
                item = Object.assign({}, foodList[i], item)
                this.foodList.splice(i, 1, item)
                break
              }
            }

          })
        }
      })
    },
    saveOrderFood() {
      this.showBtn = false
      let foodList = this.foodList.filter(item => {
        item.user_id = this.selfUserInfo.id
        item.dinner = item.dinner ? 1 : 0
        item.lunch = item.lunch ? 1 : 0
        return item
      })
      saveDoctorOrderFoodList(foodList).then((res) => {
        this.$dialog.alert({
          message: '提交成功'
        }).then(() => {
          this.$router.go(-1)
        })
      }).catch(() => {
        this.showBtn = true
      })
    }
  }
}
</script>

<style scoped>

</style>
